<template>
  <el-dialog :model-value="dialogVisible" :close-on-click-modal="true" :before-close="handleClose" title="调整审批人"
    append-to-body width="642px">
    <div class="form-history-user">
      <div class="form-history-user_item">
        <div class="__lf">原审批人:</div>
        <div class="__rt">
          <div v-for="(item, index) in newSelectData" :key="index" class="__choice_user_item"
            @click="onSelect(index, item.currentTaskAssignee)" :class="{ '__active': selectIndex === index }">{{
              item.currentTaskAssigneeName
            }}</div>
        </div>
      </div>
      <div class="form-history-user_item">
        <div class="__lf">新审批人:</div>
        <div class="__rt">
          <user-choice @submit="newApprove" ref="auditDom" />
        </div>
      </div>
      <div style="text-align: right" class="dialog-footer">
        <el-button link @click="handleClose">关闭</el-button>
        <el-button :loading="loading" type="primary" @click="submit">保存</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import UserChoice from '@/components/userChoice/index.vue'
import { ElMessage } from "element-plus";
import api from "@/api/index";
import { onMounted, watch } from 'vue';
import { unique } from '@/util/index'
export default defineComponent({
  components: {
    UserChoice,
  },
  emits: ['handleClose'],
  props: {
    dialogVisible: {
      type: Boolean,
      require: false,
    },
    selectData: {
      type: Array,
      require: false,
      default: []
    },
  },
  setup(props, context) {
    const loading = ref(false)
    const selectIndex = ref(0)
    const selectList = ref([])
    const presentUser = ref()
    const originalUser = ref()
    const instanceIds = ref([])
    const form = ref({})
    const newSelectData = ref([])
    const handleClose = () => {
      context.emit('handleClose')
    }
    const newApprove = (data) => {
      presentUser.value = data.email
    }
    const onSelect = (index, item) => {
      selectIndex.value = index
      originalUser.value = item
    }
    const submit = async () => {
      instanceIds.value = []
      props.selectData.forEach(item => {
        instanceIds.value.push(item.flowEngineInstanceId)
      });
      await api.formHistory
        .adjustmentApprover({ instanceIds: instanceIds.value, originalUser: originalUser.value, presentUser: presentUser.value })
        .then((res) => {
          ElMessage({
            message: `审批人调整成功，共${res}条，成功${res}条`,
            type: 'success'
          })
          context.emit('handleClose', 1)
        });
    }
    onMounted(() => {
      let newList = []
      props.selectData.forEach(item => {
        let smallList = [], accountList = []
        if (item.currentTaskAssignee) {
          selectList.value.push(...item.currentTaskAssignee.split(','))
          accountList = item.currentTaskAssignee.split(',')
        }

        if (item.currentTaskAssigneeName) smallList = item.currentTaskAssigneeName.split(",")
        accountList.forEach((itemTwo, index2) => {
          newList.push({ ...item, currentTaskAssignee: itemTwo, currentTaskAssigneeName: smallList[index2] })
        })
      })
      selectList.value = [... new Set(selectList.value)]
      newSelectData.value = unique(newList, 'currentTaskAssignee')
      originalUser.value = selectList.value[0]
    })


    return {
      loading,
      form,
      handleClose,
      submit,
      newApprove,
      originalUser,
      selectList,
      selectIndex,
      onSelect,
      newSelectData
    }
  },
});

</script>
<style lang="scss" scoped>
.form-history-user {
  &_item {
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    align-items: center;

    .__lf {
      margin-right: 10px;
      flex-shrink: 0;
    }

    .__rt {
      display: flex;
      width: 100%;
      flex-wrap: wrap;

      .__choice_user_item {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        margin-bottom: 5px;
        min-width: 78px;
        padding: 5px 10px;
        border-radius: 5px;
        height: 44px;
        border-radius: 2px;
        border: 1px solid #D9D9D9;
        font-size: 14px;
        color: #595959;
        cursor: pointer;

        &:last-child {
          margin-right: 0;
        }
      }

      .__active {
        border: 1px solid #0049AD;
        background: #E6F7FF;
        color: #0049AD;
      }
    }
  }
}
</style>
